﻿<!DOCTYPE html>
<html lang="en">
<head>
    <title id='Description'>To switch an editor to a right-to-left representation, just enable a single property - "rtl". When this property is on, text flows from right to left in an editor and the editor itself is mirrored. </title>
    <link rel="stylesheet" href="../../jqwidgets/styles/jqx.base.css" type="text/css" />
    <script type="text/javascript" src="../../scripts/gettheme.js"></script>
    <script type="text/javascript" src="../../scripts/jquery-1.8.2.min.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxcore.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxmaskedinput.js"></script>
    <script type="text/javascript">
        $(document).ready(function () {
            var theme = getDemoTheme();

            // Create jqxMaskedInputs
            $("#numericInput").jqxMaskedInput({rtl: true, width: '250px', height: '25px', theme: theme });
            $("#zipCodeInput").jqxMaskedInput({ rtl: true, width: 250, height: 25, mask: '#####-####', theme: theme });
            $("#ssnInput").jqxMaskedInput({ rtl: true, width: 250, height: 25, mask: '###-##-####', theme: theme });
            $("#dateInput").jqxMaskedInput({ rtl: true, width: 250, height: 25, mask: '##/##/####', theme: theme });
        });
    </script>
</head>
<body class='default'>
    <div id='jqxWidget' style="font-size: 13px; font-family: Verdana; float: left;">
        <div style='margin-top: 10px;'>
            Numeric</div>
        <div style='margin-top: 3px;' id='numericInput'>
        </div>
        <div style='margin-top: 10px;'>
            Zip Code</div>
        <div style='margin-top: 3px;' id='zipCodeInput'>
        </div>
        <div style='margin-top: 10px;'>
            SSN</div>
        <div style='margin-top: 3px;' id='ssnInput'>
        </div>
        <div style='margin-top: 10px;'>
            Date</div>
        <div style='margin-top: 3px;' id='dateInput'>
        </div>
    </div>
</body>
</html>
